var data = {
	foo : 'bar'
}

function Event(){  
    var events = {};  
      
    this.addEvents = function(){  
        for(var i = 0, j = arguments.length; i < j; i++){  
            events[arguments[i].toLowerCase()] = [];  
        }  
    }  
      
    /** 
      * 添加一个事件侦听器。 
      * @param  {String}   name 
      * @param  {Function} fn 
      * @return {this} 
      */  
    this.addListener = this.on = function(name, eventHandler) {  
        var eventQueen = events[name.toLowerCase()];  
          
        if(!eventQueen){  
            throw '没有该事件！请使用addEvent()增加事件';  
        }  
  
        eventQueen.push(eventHandler);  
          
        return this;  
    }  
      
    /** 
      * 触发事件。 
      * @param {String} name 
      * @param {Array}  args 
      * @return {Boolean} 
      */  
    this.fireEvent = function(name) {  
        var eventQueen = events[name.toLowerCase()]; // listeners  
        var args = eventQueen.length && Array.prototype.slice.call(arguments, 1);   
                      
        var result;  
        var output = [];  
          
        for (var i = 0, j = eventQueen.length; i < j; i++) {  
            result = eventQueen[i].apply(this, args);  
              
            if(result === false){  
                break;  
            }else{  
                output.push(result);  
            }  
        }  
      
        return output;  
    }  
      
    /** 
      * 移除事件侦听器。须传入原来的函数句柄。 
      * @param {String}   name 
      * @param {Function} fn 
      * @return {this} 
      */  
    this.removeListener = function(name, fn) {  
        if (events[name]) {  
            Array_Remove(events[name], fn);  
        }  
        return this;  
    }  
    
    /** 
     * 删掉某个元素。 
     * @param   {Array} arr 
     * @param   {Mixed} el 
     * @return  {Mixed} 
     */  
    function Array_Remove(arr, el){  
        var index = -1;  
        for(var i = 0, j = arr.length; i < j; i++){  
            if(arr[i] == el){  
                index = i;  
                break;  
            }  
        }  
        arr.splice(index, 1);  
        return el;  
    } 
}  


var eventMgr = new Event();
eventMgr.addEvents('change');
  
function updateData(e){
	var el = e.target;
	data[el.name] = el.value;
	
	eventMgr.fireEvent('change');// 通知其他 ui ，广播
}
 
var attributeName = 'data-onkeyup';

document.body.query("*[name]")(function(el){
	// 初始化赋值
	if(data[el.name]){
		el.value = data[el.name];
	}
	
	var eventName = attributeName.split('-on').pop();

	var target = el.getAttribute(attributeName);
	if (target){ 
		var targetEl;
		var arr = target.split(":");
		if(arr.length == 1)// 默认用 value
			targetEl = document.querySelector(arr[0]);
		else if(arr.length == 2 && arr[0] == 'text')
			targetEl = document.querySelector(arr[1]);
		
		function setValue(){
			this.targetEl.value = this.data[this.dataKey];
		}
		function setText(){
			this.targetEl.innerHTML = this.data[this.dataKey];
		}
		// 数据发送变化，通知修改
		eventMgr.on('change', (arr.length == 1 ? setValue : setText).bind({
			targetEl : targetEl,
			data : data,
			dataKey : el.name
		}));
	}
	
	// 双向
	el.addEventListener(eventName, updateData);
	eventMgr.on('change', function(){
		el.value = data[el.name];// 事件冲突
	});
});

var fns = {
	checkLength: function(v){
		return v.length < 2;
	}
};

document.body.query("*[data-bind]")(function(el){
	var dataBind = el.getAttribute('data-bind');
	if(/^toggle:/.test(dataBind))
		eventMgr.on('change', function(){
			var dataKey;
			var not = /:not\((\w+)\)/;
			if(not.test(dataBind)){
				dataKey = dataBind.match(not).pop();
				if(!data.foo) el.removeCls('hide');else el.addCls('hide');
			}else{
				// 自定义函数
				var arr = dataBind.match(/^toggle:(\w+)\((\w+)\)/);
				var fnName = arr[1];
					dataKey = arr[2];
				
				if(fns[fnName](data[dataKey])) el.removeCls('hide');else el.addCls('hide');
			}
		});

	
});
